<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <!-- 最大缩放倍数和最小缩放倍数是1，不允许用户缩放-->
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,uesr-scalable=no ,maximum-scale=1.0,minimum-scale=1.0"
    />
    <!-- 初始化css文件 -->
    <link rel="icon" href="../images/favicon.ico" />
    <link rel="stylesheet" href="../css/base.css" />
    <link rel="stylesheet" href="../css/swiper-bundle.min.css" />
    <link rel="stylesheet" href="../css/homePage.css" />
    <script src="../js/flexible.js"></script>

    <link
      rel="stylesheet"
      href="http://at.alicdn.com/t/c/font_4701356_v9cb9pj7bnj.css"
    />
    <link
      rel="stylesheet"
      href="http://at.alicdn.com/t/c/font_4701356_jr9gxsagt.css"
    />
    <title>首页</title>
  </head>
  <body>
    <header>
      <div class="header-input">
        <div class="input-left">
          <img src="../images/mi.png" alt="" />
        </div>
        <div class="input-center">
          <div class="input-center-img">
            <img src="../images/mi3.png" alt="" />
          </div>
          <div class="input-center-text">搜索商品名称</div>
        </div>
        <div class="input-right">
          <img src="../images/mi1.png" alt="" />
        </div>
      </div>
      <div class="header-tab">
        <ul>
          <li>推荐</li>
          <li>智能</li>
          <li>电视</li>
          <li>家电</li>
          <li>笔记本</li>
        </ul>
        <i class="iconfont icon-xiala"></i>
      </div>
    </header>
    <div class="swiper-box">
      <div class="swiper mySwiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide"><img src="../images/1.webp" alt="" /></div>
          <div class="swiper-slide"><img src="../images/2.webp" alt="" /></div>
          <div class="swiper-slide"><img src="../images/3.webp" alt="" /></div>
          <div class="swiper-slide"><img src="../images/4.webp" alt="" /></div>
          <div class="swiper-slide"><img src="../images/5.webp" alt="" /></div>
          <div class="swiper-slide"><img src="../images/6.webp" alt="" /></div>
          <div class="swiper-slide"><img src="../images/7.webp" alt="" /></div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
    </div>
    <nav>
      <img src="../images/nav1.webp" alt="" />
      <img src="../images/nav2.webp" alt="" />
      <img src="../images/nav3.webp" alt="" />
      <img src="../images/nav4.webp" alt="" />
      <img src="../images/nav5.webp" alt="" />
      <img src="../images/nav6.webp" alt="" />
      <img src="../images/nav7.png" alt="" />
      <img src="../images/nav8.png" alt="" />
      <img src="../images/nav9.webp" alt="" />
      <img src="../images/nav10.png" alt="" />
    </nav>
    <article>
      <section>
        <img src="../images/c1.webp" alt="" />
        <h3>Redmi Note 13 Pro</h3>
        <h4>小金刚品质</h4>
        <p>￥3999起</p>
        <button>立即购买</button>
      </section>
      <section>
        <img src="../images/c1.webp" alt="" />
        <h3>Redmi Note 13 Pro</h3>
        <h4>小金刚品质</h4>
        <p>￥3999起</p>
        <button>立即购买</button>
      </section>
      <section>
        <img src="../images/c1.webp" alt="" />
        <h3>Redmi Note 13 Pro</h3>
        <h4>小金刚品质</h4>
        <p>￥3999起</p>
        <button>立即购买</button>
      </section>
      <section>
        <img src="../images/c1.webp" alt="" />
        <h3>Redmi Note 13 Pro</h3>
        <h4>小金刚品质</h4>
        <p>￥3999起</p>
        <button>立即购买</button>
      </section>
      <section>
        <img src="../images/c1.webp" alt="" />
        <h3>Redmi Note 13 Pro</h3>
        <h4>小金刚品质</h4>
        <p>￥3999起</p>
        <button>立即购买</button>
      </section>
      <section>
        <img src="../images/c1.webp" alt="" />
        <h3>Redmi Note 13 Pro</h3>
        <h4>小金刚品质</h4>
        <p>￥3999起</p>
        <button>立即购买</button>
      </section>
      <div class="nav-footer">
        更多小米手机产品 <i class="iconfont icon-arrow-right"></i>
      </div>
    </article>
    <div class="footer-img">
      <img src="../images/d1.webp" alt="" />
    </div>
    <div class="most-xiaomi">
      <button>
        更多小米笔记本产品 <i class="iconfont icon-arrow-right"></i>
      </button>
      <button>
        更多米家智能产品 <i class="iconfont icon-arrow-right"></i>
      </button>
      <button>了解小米</button>
    </div>
    <footer>
      <div class="footer-item">
        <img src="../images/f1.png" alt="" />
        <p>首页</p>
      </div>
      <div class="footer-item">
        <img src="../images/f2.png" alt="" />
        <p>分类</p>
      </div>
      <div class="footer-item">
        <img src="../images/f3.png" alt="" />
        <p>米圈</p>
      </div>
      <div class="footer-item">
        <img src="../images/f4.png" alt="" />
        <p>购物车</p>
      </div>
      <div class="footer-item">
        <img src="../images/f5.png" alt="" />
        <p>我的</p>
      </div>
    </footer>

    <script src="../js/swiper-bundle.min.js"></script>
    <script>
      var swiper = new Swiper(".mySwiper", {
        pagination: {
          el: ".swiper-pagination",
        },
      });
    </script>
  </body>
</html>
